<#include "../common/layoutWithOutDocType.ftl"/>
<@layoutWithOutDocType>
<div class="well" style="height:600px">
<!--百度地图容器-->
  	<div>
  		<input class="input-xlarge focused" id="searchValue" type="text"  style="height: 26">
  		<button type="button" class="btn btn-primary" onclick="search()">搜 索</button>
  		<button type="button" class="btn btn-primary" onclick="dis();" >测 距</button>
  		<button type="button" class="btn btn-primary" onclick="window.location.reload()" >全部</button>
  		
  		<a href="javascript:void(0)" style="background-image: url(/img/marker/marker_greenback.png )  ;background-repeat:no-repeat;color: #ffffff;font-size: 13px;height: 25px;width: 85px;text-align: center;padding-top: 2px;" onclick="changeStatus(0)">空闲【${statusCountMap['0']!"0"}】</a>
  		<a  href="javascript:void(0)" style="background-image: url(/img/marker/marker_blueback.png )  ;background-repeat:no-repeat;color: #ffffff;font-size: 13px;height: 25px;width: 85px;text-align: center;padding-top: 2px;" onclick="changeStatus(1)">待客【${statusCountMap['1']!"0"}】</a>
  		<a  href="javascript:void(0)" style="background-image: url(/img/marker/marker_redback.png )  ;background-repeat:no-repeat;color: #ffffff;font-size: 13px;height: 25px;width: 85px;text-align: center;padding-top: 2px;" onclick="changeStatus(2)">代驾中【${statusCountMap['2']!"0"}】</a>
  		<a  href="javascript:void(0)" style="background-image: url(/img/marker/marker_purpleback.png )  ;background-repeat:no-repeat;color: #ffffff;font-size: 13px;height: 25px;width: 85px;text-align: center;padding-top: 2px;" onclick="changeStatus(3)">休息【${statusCountMap['3']!"0"}】</a>
  		<a  href="javascript:void(0)" style="background-image: url(/img/marker/marker_yellowback.png )  ;background-repeat:no-repeat;color: #ffffff;font-size: 13px;height: 25px;width: 85px;text-align: center;padding-top: 2px;"  onclick="changeStatus(4)">备用【${statusCountMap['4']!"0"}】</a>
  		<a  href="javascript:void(0)" style="background-image: url(/img/marker/marker_greenback.png )  ;background-repeat:no-repeat;color: #ffffff;font-size: 13px;height: 25px;width: 85px;text-align: center;padding-top: 2px;"  onclick="changeStatus(4)">空闲2【${statusCountMap['99']!"0"}】</a>
  		
  		<form action="/map" method="POST">
  			<input class="input-xlarge focused" id="job_number" name="job_number" type="text"  style="height: 26"> 
	  		<input class="input-xlarge focused" type="submit" value="工号查询" style="height: 26">
  		</form>
  	</div>
  	<div id="container"></div>
  	<div id="results"></div>
<style type="text/css"> 
#container{height:100%}
</style> 
<!--引用百度地图API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=VVxB3u2hT9wlF2QfiHqu7zNx"></script>
<script type="text/javascript" src="/js/MarkerTool.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
<script>
	 function loadData(){
	 	window.location.href="/map";
	 }
	 
	 setInterval(loadData,120000);
	 
	//创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        initAllMarker();//初始化数据库中已有的标点
    }
    
    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("container");//在百度地图容器中创建一个地图
		//var point = new BMap.Point(121.482258,31.240816);//定义一个中心点坐标 <成都>
        //map.centerAndZoom(point,13);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
        <#if session.syscity??>
            <#if session.syscity?length gt 0>
        		map.centerAndZoom("${session.syscity}", 12);
        	<#else>
            	map.centerAndZoom("上海", 12);
        	</#if>
        <#else>
            map.centerAndZoom("上海", 12);
        </#if>

    	map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
    	map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
    	map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));
    }
    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }
    
    //地图控件添加函数：
    function addMapControl(){
	    //向地图中添加缩放控件
		var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
		map.addControl(ctrl_nav);
	    //向地图中添加缩略图控件
		var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
		map.addControl(ctrl_ove);
	    //向地图中添加比例尺控件
		var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
		map.addControl(ctrl_sca);
    }
    
    function changeStatus(status){
        map.clearOverlays();
    	var icon_path;
    	if(status == 0){
    		icon_path = '/img/marker/marker_greennew.png';
    	}else if(status == 1){
    		icon_path = '/img/marker/marker_bluenew.png';
    	}else if(status == 2){
    		icon_path = '/img/marker/marker_rednew.png';
    	}else if(status == 3){
    		icon_path = '/img/marker/marker_purplenew.png';
    	}
    	/*else if(status == 4){
    		icon_path = '/img/marker/marker_pink.png';
    	}*/
    	else if(status == 4){
    		icon_path = '/img/marker/marker_yellowback.png';
    	}
    	var jsonStr = ${jsonStr};
    	$(jsonStr).each(function(index,item){
    	    if(status == item.status){
		    	var point = new BMap.Point(item.longitude,item.latitude);
				//创建一个标点
				var marker = new BMap.Marker(point);
				//标点右下角显示的LABEL
				//var dataLabel = new BMap.Label(item.job_number, {offset: new BMap.Size(13, 23)});
				var dataLabel = new BMap.Label(item.name, {offset: new BMap.Size(30, 5)});
			    dataLabel.setStyle({border: "0px",backgroundColor:""});
				var dataIcon= new BMap.Icon(
					icon_path, 
					new BMap.Size(80, 35), {
	    				imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
		  			}
				);
			    //设置标点图标
				marker.setIcon(dataIcon);			    
				//设置标点LABEL
				marker.setLabel(dataLabel);
				//设置标点TITLE
				//marker.setTitle(dataTitle);
				var _head = item.head;
			    if(_head == null || _head == ""){
			    	_head = "default_avatar.gif";
			    }
			    var content = "<table><tr><td rowspan=6>"
					content += "<img width=70 src='/upload/"+_head+"'></td></tr>";
					content += "<tr><td>工号："+item.job_number+"</td></tr>";
					content += "<tr><td>姓名："+item.name+"</td></tr>";
					if(item.license_num == '${session.company}'){
						content += "<tr><td>电话："+item.phone+"</td></tr>";
					}
			    	content += "<tr><td>驾照："+item.driver_license+"</td></tr>";
			    	content += "<tr><td>";
		    	var sex = item.sex;
		    	if(sex == 0 ){
			    	content += "性别：男<br>";
		    	}
		    	else if(sex == 1){
		    		content += "性别：女<br>";
		    	}
		    	else{
		    		content += "性别：未知<br>";
		    	}
		    	content += "</td></tr>";
		    	content += "</table>";
				marker.setTitle(content);
				marker.addEventListener("mouseover", function(e){
				    var content = e.target.getTitle();
					var infoWindow = new BMap.InfoWindow(content);
					this.openInfoWindow(infoWindow);
				});
				//在地图上打点
				map.addOverlay(marker);
    	    }
    	});
    }
    
     //初始化数据库中已有的标点
    function initAllMarker(){
   		<#list list as driver>
	    	var point = new BMap.Point(${driver.longitude?string(",##0.000000")},${driver.latitude?string(",##0.000000")});
			//创建一个标点
			var marker = new BMap.Marker(point);
			//标点右下角显示的LABEL
			//var dataLabel = new BMap.Label('${driver.job_number!""}|${driver.name!""}', {offset: new BMap.Size(13, 23)});
			var dataLabel = new BMap.Label('${driver.name!""}', {offset: new BMap.Size(30, 5)});
		    dataLabel.setStyle({border: "0px",backgroundColor:"",fontColor:"white"});
			var dataIcon= new BMap.Icon(
			<#if driver.status == 0>
			'/img/marker/marker_greennew.png',
			<#elseif driver.status == 1>
			'/img/marker/marker_bluenew.png',
			<#elseif driver.status == 2>
			'/img/marker/marker_rednew.png',
			<#elseif driver.status == 3>
			'/img/marker/marker_purplenew.png',
			<#elseif driver.status == 4>
			'/img/marker/marker_pink.png', 
			<#else>
			'/img/marker/marker_yellow.png', 
			</#if>
			new BMap.Size(80, 35), {
    			imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
	  			}
			);
		    //设置标点图标
			marker.setIcon(dataIcon);			    
			//设置标点LABEL
			marker.setLabel(dataLabel);
			//设置标点TITLE
			//marker.setTitle(dataTitle);
			marker.addEventListener("mouseover", function(){
			    var content = "<table><tr><td rowspan=6>"
				content += "<img width=70 src='/upload/${driver.head!"default_avatar.gif"}'></td></tr>";
				content += "<tr><td>工号：${driver.job_number!""}</td></tr>";
				content += "<tr><td>姓名：${driver.name!""}</td></tr>";
				<#if driver.license_num == session.company>
					content += "<tr><td>电话：${driver.phone!""}</td></tr>";
				</#if>
		    	content += "<tr><td>驾照：${driver.driver_license}</td></tr>";
		    	content += "<tr><td>";
		    	var sex = ${driver.sex} ;
		    	if(sex == 0 ){
			    	content += "性别：男<br>";
		    	}
		    	else if(sex == 1){
		    		content += "性别：女<br>";
		    	}
		    	else{
		    		content += "性别：未知<br>";
		    	}
		    	content += "</td></tr>";
		    	content += "</table>";
				var infoWindow = new BMap.InfoWindow(content);
				this.openInfoWindow(infoWindow);
			});
			
			//在地图上打点
			map.addOverlay(marker);
			//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
		</#list>
		
    }
    
    
    initMap();
    
     function search(){
	 	var local = new BMap.LocalSearch(map, {
		  renderOptions: {map: map, panel: "results"}
		});
		
		local.search($("#searchValue").val());
			 	
	 }
	 
	 function dis(){
	 	  var myDis = new BMapLib.DistanceTool(map);
	 	  myDis.open();
	 }
	 
</script>
</div>


          
</@layoutWithOutDocType>